<!DOCTYPE HTML>
<html>
<head>
<!--
test/aperiodic/center.html

this file draws the ammann bars for the center of the cartwheel tiling by
penrose kites and darts.
-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=320;height=356;user-scalable=no;initial-scale=1.0;" />
<!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black" /> -->
<style>
	body { padding:0px; margin:0px; color: white; background-color: black; }
	input { 
		font-size:16px;
		padding: 0px;
	}
	* {font-family: sans-serif}
	form { padding:0px; margin:0px; }
</style>
<script src="../../lib/canvas.js" /></script>
<script>
	var phi;
	function init() {
		canvas_init();
		phi = Math.sqrt(5) + 1;
		phi /= 2;
		draw_center();
	}

	function draw_center() {
		// draw the ammann bars for the center of the cartwheel tiling

		canvas_clear();
		ctx.globalCompositeOperation = 'lighter';
		ctx.translate(canvas.width / 2, canvas.height / 2);
		var b = new_draw_line();
		b.thick = 2.0;
		b.ya = -320;
		b.yb = 320;
		var u = 20;
		var d = new_draw_dot();
		d.r = 1;
		//draw_dot(d);
		var lb = phi;
		var sb = 1;
		var a = new Array();
		a.push(sb * u);
		a.push(lb * u);
		// now add more of the middle-c sequence to
		// both ends of a
		var m = [
			lb,
			sb, lb,
			lb,   sb, lb
			//sb, lb,   lb, sb, lb,
			//lb, sb, lb,   sb, lb, lb, sb, lb,
			//sb, lb, lb, sb, lb,   lb, sb, lb, sb, lb, lb, sb, lb
		];

		for (var i = 0; i < m.length; ++i) {
			a.push(m[i] * u);
			a.unshift(m[i] * u);
		}

		var w = 0;
		for (var i in a) {
			w += a[i];
		}
		w /= 2;

		var oclr = 0; //Math.random();
		var clr = 0;
		ctx.rotate(3 * Math.PI / 10);
		for (var i = 0; i < 5; ++i) {
			ctx.rotate(2 * Math.PI / 5);
			//clr += 0.2;
			clr = 0;
			b.clr = rainbow_color(clr);
			b.xa = w;
			b.xb = w;
			draw_line(b);
			a.reverse();
			for (var j = 0; j < a.length; ++j) {
				clr = oclr + (1 + j) / a.length;
				//clr += .7;
				b.clr = rainbow_color(clr);
				b.xa -= a[j];
				b.xb -= a[j];
				draw_line(b);
			}
		}
		ctx.translate(- canvas.width / 2, - canvas.height / 2);

	}

</script>
</head>
<body onload="init()">
	<canvas id="canvas" class="canvas"  width="320" height="300"></canvas>
</body>
</html>
